<script setup>
import { Search } from '@element-plus/icons-vue'
</script>
<template>
  <div>
    <el-menu
      class="el-menu-demo,left"
      mode="horizontal"
      background-color="#132c33"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      style="border: 0"
    >
      <el-menu-item index="/" class="ml-100">主页</el-menu-item>
      <el-menu-item index="/project/select" class="ml-100"
        >全部项目查看</el-menu-item
      >
      <div>
        <div>
          <el-button
            :icon="Search"
            index="/project/select"
            circle
            class="Mycircle"
            type="primary"
          />
          <!-- 这个搜索按钮没有绑定事件--绑了事件才可以跳转 -->
          <!--搜索按钮-->
          <el-select clearable placeholder="类别" class="select">
            <el-option />
          </el-select>
          <el-input placeholder="项目名称/描述" class="inputRight" />
        </div>
      </div>
      <div class="right">
        <span class="rightButton">
          <el-link type="primary" link href="/login">登录</el-link>
          <!-- <span>/</span> -->
          <!-- <el-link type="primary" href="/login">注册</el-link> -->
        </span>
        <el-dropdown style="padding: 0">
          <span class="el-dropdown-link">
            <el-badge class="item">
              <el-avatar />
            </el-badge>
            <el-icon class="el-icon--right"> </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item class="clearfix" command="person">
                <router-link to="/person">个人信息</router-link>
                <!-- <el-badge class="mark" /> -->
              </el-dropdown-item>
              <!-- <el-dropdown-item class="clearfix">
                消息
                <el-badge class="mark" />
              </el-dropdown-item> -->
              <el-dropdown-item class="clearfix">
                退出登录
                <el-badge class="mark" />
              </el-dropdown-item>
            </el-dropdown-menu>
          </template> </el-dropdown
        ><el-tooltip>
          <el-button
            circle
            type="primary"
            icon="Plus"
            style="position: absolute; top: 4px"
          >
          </el-button>
        </el-tooltip>
        <span
          style="
            width: 110%;
            position: absolute;
            color: #ababab;
            font-size: 12px;
            margin: 10px 0 0 40px;
          "
        >
          请先完善个人信息！
        </span>
      </div>
    </el-menu>
  </div>
</template>

<style scoped>
.message {
  position: fixed;
}
.el-dropdown-link {
  color: white;
}
.ml-100 {
  margin-left: 120px;
}
.ml-50 {
  margin-left: 50px;
}
.right {
  position: absolute;
  top: 8px;
  right: 160px;
}

.inputRight {
  position: absolute;
  top: 12px;
  margin-left: 200px;
  max-width: 240px;
}
.Mycircle {
  position: absolute;
  top: 12px;
  margin-left: 450px;
}
.select {
  position: absolute;
  top: 12px;
  margin-left: 110px;
  max-width: 80px;
}
.rightButton {
  position: absolute;
  left: -100px;
  top: 10px;
  color: #b7b4b4;
}
:focus-visible {
  outline: -webkit-focus-ring-color auto 0px;
}
</style>
